<script setup lang="ts">
import bz from './bz.json'
</script>

<template>
  <div class="my-5">
    <div class="p-5 text-center bg-body-tertiary">
      <div class="container py-5">
        <h1 class="text-body-emphasis"></h1>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="center">
      <div class="">
        <p class="colText">
          新标准化法规定“国家推动免费向社会公开推荐性标准文本”。整理了截至目前面向社会公开行业标准的部分网址，方便大家查询。其中大多数行业标准可免费下载，部分标准仅支持在线浏览。
        </p>
      </div>
    </div>
  </div>

  <div class="container containerInfo">
    <div class="center">
      <div class="row ele-list" v-for="item in bz">
        <div class="ele-data" :key="item.title">
          <div class="my-3">
            <h3 class="text-body-emphasis">{{ item.title }}</h3>
            <p class="colText">{{ item.desc_info }}</p>
          </div>
          <div class="link-list-group">
            <a v-for="link in item.links" :key="link.link" :href="link.link" class="list-group-item list-group-item-action" target="_blank">
              {{ link.link_text }}
            </a>
        </div>
        <div class="ele-desc" v-if="item.desc.length>0" :key="item.title">
          <div class="my-3">
            <p class="colText">{{ item.desc_info }}</p>
          </div>
          <div class="link-list-group">
            <a v-for="link in item.links" :key="link.link" :href="link.link" class="list-group-item list-group-item-action" target="_blank">
              {{ link.link_text }}
            </a>
        </div>
        </div>
      </div>

    </div>
  </div>
  </div>

</template>

<style scoped>
.bg-body-tertiary{
  width: 100%;
  background: url(../../assets/images/bannerNew.jpg) no-repeat;
  background-size: 100% 100%;
  height: 600px;
}
.containerInfo{
  width:  980px;
  text-align: left;
}
.my-3{
  color: #333;
  font-weight: 500;
  font-size: 18px;
}
.link-list-group a :hover{
  color: yellow;
}
.link-list-group a{
  background: #d9534f;
  display: block;
  width: 400px;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  margin-bottom:  20px;
}
.colText{
  font-size:  22px;
  color: #333;
  font-weight: 400;
}

</style>